<template>
    <page-wrap :showTop="false" hide-tab back title="兑换记录">
        <view class="exchange-records">
            <view class="record-container" v-if="records.length > 0">
                <view class="record-card" v-for="(item, index) in records" :key="index"
                    @click="jumpToCheckRecordDetail(item)">
                    <view class="top">
                        <view class="title">{{ item.redeemName }}</view>
                        <view class="price"><span>￥</span>{{ item.payPrice }}</view>
                    </view>
                    <view class="origin">兑换来源：{{ item.originType }}</view>
                    <view class="bottom">
                        <view class="time">{{ item.redeemDate }}</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
            </view>
            <view class="record-card-nodata" v-else>
                <Empty :baseImg="emptyImg" text="暂无相关记录~" :fontWeight="400" class="empty"></Empty>
            </view>
        </view>
    </page-wrap>
</template>

<script>
import {
    getPersonRedeemInfoList
} from "@/api/modules/career";
import Empty from "@/components/Empty.vue";
export default {
    components: { Empty },
    data() {
        return {
            emptyImg: this.$imgBaseSelf + "common/empty.png",
            records: [],
        }
    },
    onShow() {
        this.getPersonRedeemInfoListFn();
    },
    methods: {
        async getPersonRedeemInfoListFn() {
            const params = {
                personId: uni.getStorageSync("person-id").slice(2) || '123456'
            }
            const res = await getPersonRedeemInfoList(params);
            if (res.code == 200) {
                this.records = res.data;
                this.records.forEach(item => {
                    switch (item.originType) {
                        case 10:
                            item.originType = '微信平台'
                            break;
                        case 20:
                            item.originType = '抖音平台'
                            break;
                        default:
                            break;
                    }
                });
            }
        },
        jumpToCheckRecordDetail(item) {
            console.log('这里点击了', item);
            uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/exchangeRecords/recordDetail?rcId=` + item.rcId,
            });
        }
    }
}
</script>
<style lang="scss" scoped>
$img-base-careerPath: $img-base + "careerPath/";
@font-face {
    font-family: "D-DIN-PRO-700-Bold";
    /*定义字体名称*/
    src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

@font-face {
    font-family: "D-DIN-PRO-800-ExtraBold";
    /*定义字体名称*/
    src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-800-ExtraBold.ttf");
}

.exchange-records {
    width: 100%;
    height: 90vh;
    padding: 0rpx 18rpx;

    .record-container {
        margin-top: 200rpx;
        height: 90%;
        overflow-y: scroll;

        .record-card {
            width: 100%;
            /* height: 206rpx; */
            background: #FFFFFF;
            border-radius: 8rpx;
            padding: 30rpx 26rpx;
            margin-bottom: 20rpx;

            .top {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .title {
                    font-size: 32rpx;
                    color: #222222;
                    font-family: D-DIN-PRO-700-Bold;
                }

                .price {
                    color: #FF711E;
                    font-size: 40rpx;
                    font-family: D-DIN-PRO-700-Bold;

                    span {
                        font-family: D-DIN-PRO-800-ExtraBold;
                        font-size: 28rpx;
                    }
                }
            }

            .origin {
                margin-top: 28rpx;
                font-size: 32rpx;
                color: #999999;
                /* font-family: D-DIN-PRO-700-Bold; */
            }

            .bottom {
                margin-top: 16rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .time {
                    font-size: 32rpx;
                    color: #999999;
                }

                .right-arrow {
                    width: 32rpx;
                    height: 32rpx;
                    background-image: url($img-base-careerPath + "black-right-arrow.png");
                    background-size: 100% 100%;
                }
            }
        }
    }

    .record-card-nodata {
        margin-top: 240rpx;
        height: 90%;
        overflow-y: scroll;
        display: flex;
        width: 100%;
        justify-content: center;

        ::v-deep .empty {
            margin: 0 auto;

            text {
                color: #999999 !important;
                font-size: 28rpx !important;
            }
        }
    }

}
</style>